{extend name="public:base" /}
{block name="no_breadcrumb"}{/block}
{block name="content"}
<link rel="stylesheet" href="__CSS__/style.css">
<section class="content" style="min-height: 200px;font-size: 12px;">
    <div class="box_">
        <div class="box_left">
            <div class="form-group">
                <label><p>姓名</p></label>
                <input type="text">
            </div>
            <div class="form-group">
                <label><p>微信</p></label>
                <input type="text">
            </div>
            <div class="form-group">
                <label><p>姓名</p></label>
                <input type="text">
            </div>
            <div class="form-group">
                <label><p>手机</p></label>
                <input type="text">
            </div>
            <div class="form-group">
                <label><p>姓名</p></label>
                <input type="text">
            </div>
            <div class="form-group">
                <label><p>微信</p></label>
                <input type="text">
            </div>
            <div class="form-group">
                <label><p>姓名</p></label>
                <input type="text">
            </div>
            <div class="form-group">
                <label><p>手机</p></label>
                <input type="text">
            </div>
            <div class="form-group">
                <label>订单</br>状态</label>
                <select class="form-control">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                </select>
            </div>
            <div class="form-group">
                <label>订单</br>类别</label>
                <select class="form-control">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                </select>
            </div>
            <div class="form-group">
                <label>订单</br>状态</label>
                <select class="form-control">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                </select>
            </div>
            <div class="form-group">
                <label>订单</br>类别</label>
                <select class="form-control">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                </select>
            </div>
            <div class="form-group">
                <label>建单</br>客服</label>
                <select class="form-control">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                </select>
            </div>
            <div class="form-group" id="reportrange-1">
                <label>建单</br>时间</label>
                <input type="text" class="form-control form-time">
            </div>

            <div class="form-group" id="reportrange-2">
                <label>建单</br>时间</label>
                <input type="text" class="form-control form-time">
            </div>
            <div class="form-group" id="reportrange-3">
                <label>建单</br>时间</label>
                <input type="text" class="form-control form-time">
            </div>
        </div>
        <div class="box_right">
            <button type="button" class="btn btn-color-g">开始</br>查询</button>
            <button type="button" class="btn btn-color-b">生成</br>报表</button>
            <!-- <button type="button" class="btn btn-color-o" id="showlayer">显示</br>选项</button> -->
        </div>
    </div>
</section>
<!-- 查询结束 -->
<!-- 列表开始 -->
<div class="row" style="padding:15px;">
    <div class="col-xs-12">
        <div class="box box-list">
            <div class="box-header" data-original-title="" style="height: 40px;">
                <a href="addlist.html" class="btn"><h2 style="margin-top: 0;"><i class="glyphicon glyphicon-plus"></i> 增加订单</h2></a>
                <button type="button" class="btn" id="abtn" style="border:none;outline: none;box-shadow: none;"><h2 style="margin-top: 0"><i class="glyphicon glyphicon-tags"></i> 显示选项</h2></button>
            </div>
            <!-- /.box-header -->
            <div class="box-body table-responsive no-padding" style="border-bottom: 1px solid #dfdfdf;overflow: hidden;">
                <table class="table table-striped table-bordered table-condensed">
                    <tr>
                        <th>ID</th>
                        <th>姓名</th>
                        <th>电话</th>
                        <th>微信</th>
                        <th>地区</th>
                        <th>建单</br>时间</th>
                        <th>渠道</th>
                        <th>来源</th>
                        <th>类别</th>
                        <th>预约</br>进店</th>
                        <th>邀约</br>客服</th>
                        <th>线下</br>门店</th>
                        <th>线下</br>门市</th>
                        <th>状态</th>
                        <th>金牌</br>匹配</th>
                        <th>流失</br>原因</th>
                        <th>渠道</br>备注</th>
                        <th>邀约</br>备注</th>
                        <th>线下</br>备注</th>
                        <th>分配</br>到店</th>
                        <th>实际</br>到店</th>
                        <th>下次</br>追踪</th>
                        <th>成交</br>时间</th>
                        <th>最后</br>操作</th>
                        <th>渠道</br>部门</th>
                        <th>操作</th>
                    </tr>
                    <tr>
                        <td>183</td>
                        <td>John Doe</td>
                        <td>11-7-2014</td>
                        <td>183</td>
                        <td>John Doe</td>
                        <td>fatback doner.</td>
                        <td>11-7-2014</td>
                        <td>11-7-2014</td>
                        <td>11-7-2014</td>
                        <td>11-7-2014</td>
                        <td>11-7-2014</td>
                        <td>11-7-2014</td>
                        <td>11-7-2014</td>
                        <td><span class="label label-success">Approved</span></td>
                        <td>11-7-2014</td>
                        <td>11-7-2014</td>
                        <td>11-7-2014</td>
                        <td>11-7-2014</td>
                        <td>11-7-2014</td>
                        <td>11-7-2014</td>
                        <td>11-7-2014</td>
                        <td>11-7-2014</td>
                        <td>11-7-2014</td>
                        <td>11-7-2014</td>
                        <td>11-7-2014</td>
                        <td>
                            <a class="btn btn-nopadding" href="#">
                                <i class="glyphicon glyphicon-zoom-in icon-white"></i>
                            </a>
                            <a class="btn btn-nopadding" href="#">
                                <i class="glyphicon glyphicon-edit icon-white"></i>
                            </a>
                            <a class="btn btn-nopadding" href="#">
                                <i class="glyphicon glyphicon-trash icon-white"></i>
                            </a>
                        </td>
                    </tr>
                    <tr>
                        <td>183</td>
                        <td>John Doe</td>
                        <td>11-7-2014</td>
                        <td>183</td>
                        <td>John Doe</td>
                        <td>fatback doner.</td>
                        <td>11-7-2014</td>
                        <td>11-7-2014</td>
                        <td>11-7-2014</td>
                        <td>11-7-2014</td>
                        <td>11-7-2014</td>
                        <td>11-7-2014</td>
                        <td>11-7-2014</td>
                        <td><span class="label label-success">Approved</span></td>
                        <td>11-7-2014</td>
                        <td>11-7-2014</td>
                        <td>11-7-2014</td>
                        <td>11-7-2014</td>
                        <td>11-7-2014</td>
                        <td>11-7-2014</td>
                        <td>11-7-2014</td>
                        <td>11-7-2014</td>
                        <td>11-7-2014</td>
                        <td>11-7-2014</td>
                        <td>11-7-2014</td>
                        <td>
                            <a class="btn btn-nopadding" href="#">
                                <i class="glyphicon glyphicon-zoom-in icon-white"></i>
                            </a>
                            <a class="btn btn-nopadding" href="#">
                                <i class="glyphicon glyphicon-edit icon-white"></i>
                            </a>
                            <a class="btn btn-nopadding" href="#">
                                <i class="glyphicon glyphicon-trash icon-white"></i>
                            </a>
                        </td>
                    </tr>
                </table>
            </div>
            <!-- /.box-body -->
            <ul class="pagination pagination-centered pagination-list">
                <li><a href="#">上一页</a></li>
                <li class="active">
                    <a href="#">1</a>
                </li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">下一页</a></li>
            </ul>
        </div>
        <!-- /.box -->
    </div>
</div>
<!-- 列表结束 -->
{/block}
{block name="moal"}
<!-- 弹出层 开始-->
<div class="content-wrapper layer-box" id="layerbox" style="margin-left: 0;">
    <div class="row" style="padding:15px;">
        <div class="col-xs-12">
            <div class="box box-list box-noborder" style="margin-top: 20px;">
                <div class="box-header" data-original-title="" style="height: 40px;background: #efefef;">
                    <h2><i class="glyphicon glyphicon-cog"></i>搜索选择</h2>
                    <input class="chose-btn" type="button" id="all" value="全选">
                    <input class="chose-btn" type="button" id="uncheck" value="不选">
                    <input class="chose-btn" type="button" id="othercheck" value="反选">
                    <input class="sz-btn qd-btn" type="button" value="确定">
                    <input class="sz-btn back-btn" type="button" value="返回">
                </div>
                <div class="box-body table-responsive" id="check-div">
                    <label><input type="checkbox">&nbsp;ID</label>
                    <label><input type="checkbox">&nbsp;姓名</label>
                    <label><input type="checkbox">&nbsp;微信</label>
                    <label><input type="checkbox">&nbsp;手机</label>
                    <label><input type="checkbox">&nbsp;客服</label>
                    <label><input type="checkbox">&nbsp;订单时间</label>
                    <label><input type="checkbox">&nbsp;订单类别</label>
                    <label><input type="checkbox">&nbsp;ID</label>
                    <label><input type="checkbox">&nbsp;姓名</label>
                    <label><input type="checkbox">&nbsp;微信</label>
                    <label><input type="checkbox">&nbsp;手机</label>
                    <label><input type="checkbox">&nbsp;客服</label>
                    <label><input type="checkbox">&nbsp;订单时间</label>
                    <label><input type="checkbox">&nbsp;订单类别</label>
                </div>
            </div>
        </div>
    </div>
    <div class="row" style="padding:15px;">
        <div class="col-xs-12">
            <div class="box box-list box-noborder">
                <div class="box-header" data-original-title="" style="height: 40px;background: #efefef;">
                    <h2><i class="glyphicon glyphicon-cog"></i>列表选择</h2>
                    <input class="chose-btn" type="button" id="box-all" value="全选">
                    <input class="chose-btn" type="button" id="box-uncheck" value="不选">
                    <input class="chose-btn" type="button" id="box-othercheck" value="反选">
                    <input class="sz-btn qd-btn" type="button" value="确定">
                    <input class="sz-btn back-btn" type="button" value="返回">
                </div>
                <div class="box-body table-responsive" id="check-box">
                    <label><input type="checkbox">&nbsp;ID</label>
                    <label><input type="checkbox">&nbsp;姓名</label>
                    <label><input type="checkbox">&nbsp;微信</label>
                    <label><input type="checkbox">&nbsp;手机</label>
                    <label><input type="checkbox">&nbsp;微信</label>
                    <label><input type="checkbox">&nbsp;地区</label>
                    <label><input type="checkbox">&nbsp;建单时间</label>
                    <label><input type="checkbox">&nbsp;渠道</label>
                    <label><input type="checkbox">&nbsp;来源</label>
                    <label><input type="checkbox">&nbsp;类别</label>
                    <label><input type="checkbox">&nbsp;预约进店</label>
                    <label><input type="checkbox">&nbsp;邀约客服</label>
                    <label><input type="checkbox">&nbsp;线下门店</label>
                    <label><input type="checkbox">&nbsp;线下门市</label>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="js"}
<script type="text/javascript" src="__JS__/moment.js"></script>
<script type="text/javascript" src="__JS__/daterangepicker.js"></script>
<script type="text/javascript" src="__JS__/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="__JS__/bootstrap-timepicker.min.js"></script>
<script type="text/javascript">
    $(function() {

        var start = moment().subtract(29, 'days');
        var end = moment();

        function cb(start, end) {
            $('#reportrange-1 input').val(start.format('YYYY/MM/DD') + ' - ' + end.format('YYYY/MM/DD'));
        }

        $('#reportrange-1').daterangepicker({
            startDate: start,
            endDate: end,
            ranges: {
                '今天': [moment(), moment()],
                '昨天': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                '过去7天': [moment().subtract(6, 'days'), moment()],
                '过去30天': [moment().subtract(29, 'days'), moment()],
                '这个月': [moment().startOf('month'), moment().endOf('month')],
                '上个月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
            },
            locale : {
                applyLabel : '确定',
                cancelLabel : '取消',
                fromLabel : '起始时间',
                toLabel : '结束时间',
                customRangeLabel : '自定义',
                // daysOfWeek : [ '日', '一', '二', '三', '四', '五', '六' ],
                // monthNames : [ '一月', '二月', '三月', '四月', '五月', '六月',
                // '七月', '八月', '九月', '十月', '十一月', '十二月' ],
                // firstDay : 1
            }
        }, cb);

        cb(start, end);
        function bd(start, end) {
            $('#reportrange-2 input').val(start.format('YYYY/MM/DD') + ' - ' + end.format('YYYY/MM/DD'));
        }
        $('#reportrange-2').daterangepicker({
            startDate: start,
            endDate: end,
            ranges: {
                '今天': [moment(), moment()],
                '昨天': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                '过去7天': [moment().subtract(6, 'days'), moment()],
                '过去30天': [moment().subtract(29, 'days'), moment()],
                '这个月': [moment().startOf('month'), moment().endOf('month')],
                '上个月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
            },
            locale : {
                applyLabel : '确定',
                cancelLabel : '取消',
                fromLabel : '起始时间',
                toLabel : '结束时间',
                customRangeLabel : '自定义',
                // daysOfWeek : [ '日', '一', '二', '三', '四', '五', '六' ],
                // monthNames : [ '一月', '二月', '三月', '四月', '五月', '六月',
                // '七月', '八月', '九月', '十月', '十一月', '十二月' ],
                // firstDay : 1
            }
        }, bd);
        bd(start, end);
        function as(start, end) {
            $('#reportrange-3 input').val(start.format('YYYY/MM/DD') + ' - ' + end.format('YYYY/MM/DD'));
        }
        $('#reportrange-3').daterangepicker({
            startDate: start,
            endDate: end,
            ranges: {
                '今天': [moment(), moment()],
                '昨天': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                '过去7天': [moment().subtract(6, 'days'), moment()],
                '过去30天': [moment().subtract(29, 'days'), moment()],
                '这个月': [moment().startOf('month'), moment().endOf('month')],
                '上个月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
            },
            locale : {
                applyLabel : '确定',
                cancelLabel : '取消',
                fromLabel : '起始时间',
                toLabel : '结束时间',
                customRangeLabel : '自定义',
                // daysOfWeek : [ '日', '一', '二', '三', '四', '五', '六' ],
                // monthNames : [ '一月', '二月', '三月', '四月', '五月', '六月',
                // '七月', '八月', '九月', '十月', '十一月', '十二月' ],
                // firstDay : 1
            }
        }, as);
        as(start, end);
    });

    $(function(){
        $('#showlayer').click(function(){
            $('.layer-box').show();
        });
        // $('#abtn').click(function(){
        // 	$('.layer-box').show();
        // });
        $('#closebtn').click(function(){
            $('.layer-box').hide();
        })
        var layertext=$('#layerbox').text();
        $('#abtn').on('click', function(){
            var layertext=$('#layerbox').html();
            layer.open({
                type: 1,
                title: false,
                area: ['1000px', '560px'],
                shadeClose: true, //点击遮罩关闭
                content: layertext
            });
        });
        var checkall=$('#all');
        var uncheck=$('#uncheck');
        var othercheck=$('#othercheck');
        var checkdiv=$('#check-div');
        checkall.click(function(){
            checkdiv.find("input[type='checkbox']").prop('checked',true);
        })
        uncheck.click(function(){
            checkdiv.find("input[type='checkbox']").prop('checked',false);
        })
        othercheck.click(function(){
            checkdiv.find("input[type='checkbox']").each(function(){
                $(this).prop("checked", !$(this).prop("checked"));
            })
        })

        var checkallbox=$('#box-all');
        var uncheckbox=$('#box-uncheck');
        var otherbox=$('#box-othercheck');
        var checkbox=$('#check-box');
        checkallbox.click(function(){
            checkbox.find("input[type='checkbox']").prop('checked',true);
        })
        uncheckbox.click(function(){
            checkbox.find("input[type='checkbox']").prop('checked',false);
        })
        otherbox.click(function(){
            checkbox.find("input[type='checkbox']").each(function(){
                $(this).prop("checked", !$(this).prop("checked"));
            })
        })
    })
</script>
{/block}